<template>
    <div class="newGoods">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <!-- banner -->
        <div class="banner">
            <img src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png" alt="">
        </div>
        <!-- 导航 -->
        <div class="navbar">
            <van-tabs
                v-model="active"
                line-height="0"
                title-active-color="#b4282d"
                @click="toggleList"
            >
                <van-tab title="综合"></van-tab>
                <van-tab title="价格"></van-tab>
                <van-tab title="分类"></van-tab>
            </van-tabs>
        </div>
        <div class="goods-subList">
            <ul class="list-items">
                <div
                    class="list-item"
                    v-for="(val, index) in list"
                    :key="index"
                    @click="toGoods(val.id)"
                >
                    <img :src="val.list_pic_url" alt="">
                    <p>{{val.name}}</p>
                    <p>￥{{val.retail_price}}</p>
                </div>
                <div class="list-item moreGoods">
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
import {getNewGoodsInfo} from '@/api/home/index'

export default {
    data() {
        return {
            active: 0,
            list: '',
            order: ''
        };
    },
    methods: {
        // 返回
        onClickLeft() {
            this.$router.go(-1);
        },
        // 商品详情跳转
        toGoods(id) {
            this.$router.push( { path: '/pages/goods', query: { id, } } )
        },
        // 标签切换列表
        toggleList(newval) {
            console.log(newval);
            var obj = {...this.$route.query}
            // 价格升序降序
            if (newval == 1) {
                if (this.order == 'asc') {
                    this.order = 'desc'
                } else {
                    this.order = 'asc'
                }
                obj.order = this.order;
            } else {
                this.order = ''
            }
            getNewGoodsInfo(obj)
            .then(res => {
                this.list = res.data
            })
        }
    },
    created() {
        getNewGoodsInfo(this.$route.query)
        .then(res => {
            this.list = res.data
            console.log(this.list);
        })
    }
}
</script>

<style lang="scss" scoped>
    .newGoods{
        background: #f4f4f4;
        .header{
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
        }
        .banner{
            margin-top: 1.226667rem;
            img{
                width: 100%;
                height: 139px;
            }
        }
        .goods-subList{
            width: 100%;
            margin-top: 5px;
            .list-items{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                .list-item{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin-bottom: 6px;
                    width: 180px;
                    background: #fff;
                    img{
                        width: 151px;
                        height: 151px;
                    }
                    p{
                        width: 180px;
                        margin: 0 0 12px 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p:last-child {
                        color: #9c3232;
                    }
                }
                .moreGoods{
                    height: 0;
                }
            }
        }
    }
</style>
